<template>
  <div class="repair_main">
    <v-header head-title="物业报修" goBack="true" repair-publish="发布" @repairPublish="addRepair"></v-header>
    <publish @getValue="getValue" @getImage="getImage" :holder="holder"></publish>
    <div class="line"></div>
    <ul class="input_row">
      <li>
        <span>姓名：</span>
        <input type="text" placeholder="请输入姓名" v-model="repairName">
      </li>
      <li>
        <span>电话号码：</span>
        <input type="tel" placeholder="请输入电话号码" v-model="repairPhone" maxlength="11">
      </li>
      <li>
        <span>报修标题：</span>
        <input type="text" placeholder="请输入报修标题" v-model="repairTitle">
      </li>
      <li>
        <span>详细地址：</span>
        <input type="text" placeholder="请输入详细地址" v-model="repairAddress">
      </li>
    </ul>
    <div class="line"></div>
    <div class="type_box">
      <div class="box_title">
        <span>请选择类别：</span>
      </div>
      <ul class="items clearfix">
        <li v-for="item in assort" class="item" @click="selectStyle(item)">
          <span class="title" :class="{'active':item.active,'unactive':!item.active}">
          {{item.type}}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss">
  .repair_main {
    width: 100%;
    background: #fff;
    padding-top: 40px;
    .line {
      width: 100%;
      height: 10px;
      background: #f2f2f2;
    }
    .input_row {
      width: 100%;
      li {
        height: 45px;
        border-bottom: 1px solid #d7d7d7;
        span {
          font-size: 15px;
          line-height: 45px;
          margin-left: 10px;
        }
        input {
          width: 65%;
          height: 36px;
          outline: none;
          border: none;
          color: #777777;
          font-size: 14px;
        }

      }
      li:last-child {
        border-bottom: none;
      }
    }
    .type_box {
      width: 100%;
      .box_title {
        width: 100%;
        padding: 13px 0 0 0;
        span {
          font-size: 15px;
          color: #666666;
          margin-left: 10px;
        }
      }
      .items {
        padding-bottom: 20px;
        .item {
          float: left;
          width: 25%;
          height: 40px;
          line-height: 45px;
          text-align: center;
          margin-top: 5px;
          .title {
            border: 1px solid #d9d9d9;
            padding: 10px 11px;
            border-radius: 3px;
            color: #292929;
          }
          .active {
            border: 1px solid #0078de;
            padding: 8px 10px;
            border-radius: 3px;
            color: #0b7ad9;
          }
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import qs from 'qs'
  import { Toast, Indicator } from 'mint-ui'
  import {
    loadVillageId,
    loadOpenId
  } from '../../common/js/cache.js'
  import commonUrl from '../../common/js/commonUrl.js'
  import publish from '../common/publish.vue'

  export default {
    name: 'Repair',
    data () {
      return {
        repairContent: '',
        serverIds: [],
        repairName: '',
        repairPhone: '',
        repairTitle: '',
        repairAddress: '',
        showLoading: false,
        holder: '请输入物业报修的内容(字数不超过200)',
        value: '',
        assort: []
      }
    },
    created () {
      this.getAssort()
    },
    methods: {
      getValue (value) {
        this.repairContent = value
      },
      getImage (image) {
        // this.imagesLrz = image
        this.serverIds = image
      },
      getAssort () {
        const url = `${commonUrl.apihost}index.php/home/repair/assort`
        this.$http.get(url).then(res => {
          // console.log(res)
          if (res.data.code === 200) {
            this.assort = res.data.data
            // console.log(this.assort)
          }
        })
      },
      // 类别选择
      selectStyle (item) {
        this.value = item.id
        // console.log(this.value)
        setTimeout(() => {
          this.assort.forEach(item => {
            this.$set(item, 'active', false)
          })
          this.$set(item, 'active', true)
        }, 20)
      },
      addRepair () {
        setTimeout(function () {
          Indicator.close()
        }, 15000)
        if (!this.repairContent.trim().length || !this.repairContent || !this.serverIds.length || !this.repairName || !this.repairPhone || !this.repairTitle || !this.repairAddress) {
          Toast({
            message: '请填写完整信息',
            position: 'middle',
            duration: 2000
          })
          return
        }
        // 电话号码的正则表达式
        if (!(/^1(3|4|5|7|8)\d{9}$/.test(this.repairPhone))) {
          Toast({
            message: '电话号码错误，请正确输入',
            position: 'middle',
            duration: 2000
          })
          return
        }
        Indicator.open({
          text: '发布中...',
          spinnerType: 'fading-circle'
        })
        const url = `${commonUrl.apihost}index.php/home/repair/add`
        const data = {
          title: this.repairTitle,
          content: this.repairContent,
          phone: this.repairPhone,
          name: this.repairName,
          address: this.repairAddress,
          serverIds: this.serverIds,
          assort: this.value,
          areas_id: loadVillageId(),
          openid: loadOpenId()
        }
        // console.log(data)
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          if (res.data.code === 200) {
            Indicator.close()
            Toast({
              message: '发布成功',
              position: 'middle',
              duration: 2000
            })
            history.replaceState({}, '', '/Home')
            this.$router.push('/home/Repairs')
          }
          if (res.data.code === 400) {
            Indicator.close()
            Toast({
              message: '发布失败',
              position: 'middle',
              duration: 3000
            })
          }
          if (res.data.code === 401) {
            Indicator.close()
            Toast({
              message: '您的发表帖子已经触犯相关法律法规,暂时不能使用发帖和评论功能.',
              position: 'middle',
              duration: 3000
            })
          }
        })
      }
    },
    components: {
      'v-header': headTop,
      publish
    }
  }
</script>
